<template>
  <view class="mv-recommend" v-if="!isLoading">
    <musicHead title="mv推荐"></musicHead>
    <view class="mv-recommend-head">
      <view @click="changeScene(1)" :class="[scene == 1 ? 'active' : '']"
        >推荐
      </view>
      <view @click="changeScene(2)" :class="[scene == 2 ? 'active' : '']"
        >视频</view
      >
    </view>

    <transition name="tuijian">
      <view class="container" v-if="scene == 1">
        <scroll-view
          scroll-y="true"
          scroll-with-animation="true"
          :scroll-top="scrollTop"
          @scroll="scroll"
        >
          <view class="mv-recommend-list">
            <view
              class="mv-recommend-list-item"
              v-for="(item, index) in mvList"
              :key="index"
              @tap="goToPlayMv(item)"
            >
              <view class="mv-recommend-list-item-image">
                <image :src="item.cover" mode="" />
              </view>
              <view class="mv-recommend-list-item-center">
                <text class="iconfont icon-bofang"></text>
                <text>{{ item.playCount | formatCount }}</text>
              </view>
              <view class="mv-recommend-list-item-bottom">{{ item.name }}</view>
            </view>
          </view>
          <view class="mv-loading" @tap="getMoreMvRecommend">
            <view v-if="!isEnd">加载更多</view>
            <view v-else @tap="goTop">到底了,点击回到顶部</view>
          </view>
        </scroll-view>
      </view>
    </transition>

    <transition name="mv">
      <view class="container" v-if="scene == 2">
        <scroll-view
          scroll-y="true"
          scroll-with-animation="true"
          lower-threshold="100"
          @scrolltolower="scrolltolower"
        >
          <view class="mv-recommend-list">
            <view
              class="mv-recommend-list-item"
              v-for="(item, index) in mvMvList"
              :key="index"
              @tap="goToPlayMv(item)"
            >
              <view class="mv-recommend-list-item-image">
                <image :src="item.cover" mode="" />
              </view>
              <view class="mv-recommend-list-item-center">
                <text class="iconfont icon-bofang"></text>
                <text>{{ item.playCount | formatCount }}</text>
              </view>
              <view class="mv-recommend-list-item-bottom">{{ item.name }}</view>
            </view>
          </view>
        </scroll-view>
      </view>
    </transition>
  </view>
</template>

<script>
import { mvRecommend, mvList } from "@/api";
export default {
  data() {
    return {
      mvList: [],
      mvMvList: [],
      scene: 1,
      isLoading: true,
      limit: 10,
      mvlimit: 10,
      isEnd: false,
      scrollTop: 0,
      old: {
        scrollTop: 0,
      },
      more: true,
    };
  },
  onLoad() {
    this.getMvRecommendList(this.limit);
    this.getMvList(this.mvlimit);
  },

  onPullDownRefresh() {
    try {
      this.getMvRecommendList(this.limit);
      this.getMvList(this.mvlimit);
      uni.stopPullDownRefresh();
      uni.showToast({
        title: "刷新成功",
        duration: 2000,
      });
    } catch (error) {}
  },

  methods: {
    // 改变头部场景
    changeScene(scene) {
      this.scene = scene;
    },

    scroll(e) {
      this.old.scrollTop = e.detail.scrollTop;
    },
    goTop(e) {
      this.scrollTop = this.old.scrollTop;
      this.$nextTick(function () {
        this.scrollTop = 0;
      });
    },

    // 第二页mv
    async getMvList(mvlimit) {
      try {
        let data = await mvList(mvlimit);
        this.mvMvList = data.data || [];
        if (!data.more) {
          setTimeout(() => {
            uni.showToast({
              title: "暂无更多内容",
              duration: 2000,
            });
          }, 2000);

          this.more = data.more;
        }
      } catch (error) {}
    },
    // 获取推荐mv
    async getMvRecommendList(limit) {
      try {
        uni.showLoading({
          title: "Loading...",
        });
        let data = await mvRecommend(limit);
        this.mvList = data.data || [];
        this.isLoading = false;
        console.log(data);
      } catch (error) {
      } finally {
        uni.hideLoading();
      }
    },

    // 去播放mv
    goToPlayMv(item) {
      // item = JSON.stringify(item);
      console.log(item);
      uni.navigateTo({
        url: `/pages/mvPlay/index?mvId=${item.id}&name=${item.name}&artistName=${item.artistName}&playCount=${item.playCount}`,
      });
    },

    // 加载更多
    getMoreMvRecommend() {
      if (this.limit >= 30) {
        this.isEnd = true;
        return;
      }
      this.limit += 10;
      this.getMvRecommendList(this.limit);
    },

    scrolltolower(e) {
      if (!this.more) {
        return;
      }
      this.mvlimit += 10;
      this.getMvList(this.mvlimit);
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: calc(100vh - 205px);
  padding-bottom: calc(var(--window-bottom)+20rpx);
  overflow: hidden;
}

/* #ifdef MP-WEIXIN */
.container {
  width: 100%;
  height: calc(100vh-10px);
  padding-bottom: calc(var(--window-bottom) + 20rpx);
  background-color: #ffffff;
  overflow: hidden;
}
.container scroll-view {
  height: 100%;
}
/* #endif */

.mv-enter,
.mv-leave-to {
  opacity: 0;
}
/* 整个元素的进入和离开的过程，谁做动画给谁加 */
.mv-enter-active,
.mv-leave-active {
  transition: 0.3s linear;
}
/* 进入的终点、离开的起点 */
.mv-enter-to,
.mv-leave {
  // transform: translateX(-50%);
  opacity: 1;
}

.tuijian-enter,
.tuijian-leave-to {
  // transform: translateX(-50%);
  opacity: 0;
}
/* 整个元素的进入和离开的过程，谁做动画给谁加 */
.tuijian-enter-active,
.tuijian-leave-active {
  transition: 0.3s linear;
}
/* 进入的终点、离开的起点 */
.tuijian-enter-to,
.tuijian-leave {
  // transform: translateX(30%);
  opacity: 1;
}

//过渡的动画
page {
  background-color: #f3f3f3;
}
.mv-recommend-head {
  display: flex;
  align-items: center;
  margin: 50rpx;
  margin-top: 10rpx;
  height: 50rpx;
  .active {
    border-bottom: 2rpx solid green;
    // padding-bottom: 60rpx;
    font-size: 48rpx;
  }
  view {
    padding: 20rpx;
    font-size: 40rpx;
  }
  view:nth-child(1) {
    margin-right: 20rpx;
  }
}

.mv-recommend-list {
  margin: 30rpx;
  display: flex;
  flex-direction: column;
  .mv-recommend-list-item {
    margin: 20rpx 0rpx;
    position: relative;
    width: 100%;
    height: 350rpx;
    background-color: #ffffff;
    border-radius: 30rpx;
    overflow: hidden;
    // color: #ffffff;
    .mv-recommend-list-item-image {
      width: 100%;
      height: 250rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .mv-recommend-list-item-center {
      position: absolute;
      top: 200rpx;
      left: 30rpx;
      color: #ffffff;
      text:nth-child(1) {
        font-size: 34rpx;
        margin-right: 10rpx;
      }
    }
    .mv-recommend-list-item-bottom {
      margin: 0rpx 30rpx;
      width: 100%;
      height: 100rpx;
      font-size: 36rpx;
    }
  }
}

.mv-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  view {
    margin-top: 30rpx;
  }
}
</style>